<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8"/>
    <title>Hello World</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="./t.js"></script>
    <style>
        table {
            width: 1400px;
            min-height: 400px;
            border: 1px solid #ccc;
            border-collapse: collapse;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #ccc;
            height: 80px;
            width: 200px;
        }

        .bottom td {
            height: 20px
        }
    </style>
</head>

<body>
<div id="root"></div>
<script type="text/babel">
    // console.log(data)
    //解构hook
    let {useState, Fragment} = React;


    function MyApp() {
        let [data, setData] = useState(datas)
        console.log(data)
        let trEl = data._detail.map((item, index) => {
            return (
                <Fragment key={index}>
                    <tr>
                        <td rowSpan="2">
                            {item.detail_type}
                        </td>
                        <td rowSpan='2'>{item.dept_id ? "35班" : ""}</td>
                        <td>
                            学习时间
                        </td>
                        <td>
                            {item._section[0].dtt_s} - {item._section[0].dtte}
                            总共:{item.to_days}
                        </td>
                        <td>
                            缺少数据
                        </td>
                        <td>
                            缺少数据
                        </td>
                        {index == 0 ? <td rowSpan={data._detail.length * 2}>{data._study_support.map(v => {
                            return (<p>{v}</p>)
                        })}</td> : null}
                        {index == 0 ? <td rowSpan={data._detail.length * 2}>{data._study_support.map(v => {
                            return (<p>{v}</p>)
                        })
                        }</td> : null}
                        {index == 0 ? <td rowSpan={data._detail.length * 2}>{
                            data._study_support.map(v => {
                                return (<p>{v}</p>)
                            })
                        }</td> : null}
                    </tr>
                    <tr className='bottom'>
                        <td>学习阶段划分</td>
                        <td>
                            阶段id:{item._section[0].study_partition_id}
                        </td>
                        <td>

                        </td>
                        <td>
                            阶段id:{item._section[0]._study_partition_id}
                        </td>
                    </tr>
                </Fragment>
            )

        })

        return (
            <table>
                <thead>
                <tr>
                    <th colSpan="3">班级区分</th>
                    <th colSpan="3">时间</th>
                    <th>形式</th>
                    <th>指标</th>
                    <th>学习保障</th>
                </tr>
                </thead>
                <tbody>
                {trEl}
                <tr>
                    <td>备注:</td>
                    <td colSpan={8}>
                        1.xxx
                        <br/>
                        2.xxx
                        <br/>
                    </td>
                </tr>
                </tbody>
            </table>
        )
    }

    const container = document.getElementById('root');
    const root = ReactDOM.createRoot(container);
    root.render(<MyApp/>);

</script>
</body>

</html>